<template>
    <div>
        <Dialog v-model="dialogVisible1" title="发送简历给面试官" width="420">
            <div class="message_p">
                <el-form ref="ruleFormRef" :model="state.form" :rules="rules" label-width="120px" label-position="top">
                    <el-form-item label="面试官邮箱地址" prop="toMails">
                        <el-input v-model="state.form.toMails" clearable placeholder="邮箱地址" @change="change(0)"
                            style="width: 60%" />
                        <el-select v-model="state.form.email" clearable placeholder="请选择"
                            style="width: 35%;margin-left: 16px;" @change="change(1)">
                            <el-option v-for="item in state.listOptions" :key="item.userId" :label="item.nickName"
                                :value="item.userId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="邮件通知内容" prop="notices">
                        <el-input v-model="state.form.notices" disabled :autosize="{ minRows: 2 }" type="textarea"
                            placeholder="短信通知内容" />
                    </el-form-item>
                    <div class="flex jcfe aic" style="width: 100%;">
                        <el-button @click="DialogClose()">取消</el-button>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                    </div>
                </el-form>
            </div>
        </Dialog>
    </div>
</template>
<script lang="ts" setup>
import { list } from "@/api/admin/index"
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive } from 'vue'
import { Dialog } from '@/components/Dialog'
import { ElButton } from 'element-plus'
import { onMounted } from "vue"
const dialogVisible1 = ref(false)
const loading = ref(false)
const emit = defineEmits(['sendClick'])
const props = defineProps({
    sendData: {
        type: Object,
        default: () => {
            return {}
        }
    }

})
interface RuleForm {
    time: string
    location: string
    notice: string
    notices: string
    toMails: string
}
const validateTime = (rule, value, callback) => {
    if (state.form.toMails || state.form.email) {
        callback();
    } else {
        callback(new Error("请输入邮箱地址"))
    }
};
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
    time: [{ required: true, message: '请填写笔试时间', trigger: 'blur' }],
    location: [{ required: true, message: '请填写笔试地点', trigger: 'blur' }],
    notice: [{ required: true, message: '请填写笔试备注', trigger: 'blur' }],
    notices: [{ required: true, message: '请填写笔试地点', trigger: 'blur' }],
    toMails: [
        { validator: validateTime, trigger: ['blur', 'change'] },
        { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }
    ]
})
const state = reactive({
    listOptions: [] as any,
    form: {
        notices: "【香城英才网】【{XX公司}简历筛选通知：您有{x份简历}待筛选，请尽快查看！】"
    } as any,
})
const DialogOpen = () => {
    state.form = {
        notices: "【香城英才网】【{XX公司}简历筛选通知：您有{x份简历}待筛选，请尽快查看！】"
    }
    dialogVisible1.value = true
}
const DialogClose = () => {
    dialogVisible1.value = false
}
const change = (index) => {
    if (index == 0) {
        state.form.email = ""
    } else {
        state.form.toMails = ""
    }
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let email = ""
            if (state.form.toMails) {
                email = state.form.toMails
            } else {
                state.listOptions.forEach(element => {
                    if (element.userId == state.form.email) {
                        email = element.email
                    }
                });
            }

            let obj = {
                toMails: email
            }
            emit('sendClick', obj)
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 暴露方法
defineExpose({
    DialogOpen,
    DialogClose
})
const listUser = async () => {
    const res: any = await list({ pageNum: 1, pageSize: 9999999 })
    console.log("系统用户：", res.rows);
    state.listOptions = res.rows

}
listUser()


</script>
<style lang="less">
.el-dialog__header {
    padding: 10px;
    border-bottom: 1px solid #D8D8D8;
}

.el-dialog__body {
    padding: 20px;
}
</style>
<style lang="less" scoped>
.message_p {
    padding: 0px 10px 20px 10px;
}

.el-button {
    margin-top: 20px;
    width: 134px;
    height: 40px;
}
</style>